package com.example.kotlin.jetpack_compose_by_tutorials

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.R
import com.example.kotlin.theme.Green100

/**
 *Create by Fanketly on 2022/9/15
 *Gitee:https://gitee.com/fanketly
 *desc:使用 XML 时，您可以通过使用布局（扩展 ViewGroup 的类）来实现这一点。
 *  ViewGroup 可以持有零个或多个视图，并负责测量其所有子视图并根据不同的规则将它们放置在屏幕上。
 *  在 Jetpack Compose 中，ViewGroup 的替代品只是称为 Layout。
 */

/**
 * **定位**
 *
 *1.horizontalArrangement:
 *SpaceBetween：Row() 为每个孩子放置相等的空间，而不计算第一个孩子之前或最后一个孩子之后的间距。
 *SpaceEvenly：与 SpaceBetween 类似，Row() 为子项放置等量的空间，但这次它包括开始或结束间距。
 *SpaceAround：Row() 与 SpaceEvenly 一样放置孩子，但将连续孩子之间的空间减少了一半。
 *Center, Start, End：Row() 将子项置于中心、开始或结束位置，它们之间没有空格
 *
 *2.verticalAlignment:
 *• 顶部：将子项与父项的顶部对齐。
 *• CenterVertically：垂直对齐父项中心的子项。
 *• 底部：将子项与父项的底部对齐。
 *
 * 3.使用权重
 *
 **/
@Composable
fun MyRow(modifier: Modifier) {
    val list = listOf(R.string.app_name, R.string.app_name, R.string.app_name)
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceAround,
        modifier = modifier.fillMaxSize()
    ) {
        list.forEach { textResId ->
            MyRowText(stringResource(id = textResId))
//            Text(
//                text = stringResource(id = textResId),
//                fontSize = 18.sp,
//                modifier = Modifier.weight(1/3f)
//            )
        }
    }
}

@Composable
fun MyColumn() {
    val list = listOf(R.string.app_name, R.string.app_name, R.string.app_name)
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround,
        modifier = Modifier.fillMaxSize()
    ) {
        list.forEach { textResId ->
//            MyRowText(stringResource(id = textResId))
            Text(
                text = stringResource(id = textResId),
                fontSize = 18.sp,
//                modifier = Modifier.weight(1/3f)
            )
        }
    }
}

@Composable
fun MyBox(
    modifier: Modifier = Modifier,
    contentModifier: Modifier = Modifier
) {
//    propagateMinConstraints = true 时内容会填充满Box
    Box(modifier = modifier.fillMaxSize(), propagateMinConstraints = false) {
//呈现顺序与放置顺序相同
        Text(
            text = stringResource(id = R.string.first),
            fontSize = 22.sp,
            modifier = contentModifier.align(Alignment.TopStart)
        )
        Text(
            text = stringResource(id = R.string.first),
            fontSize = 22.sp,
            modifier = contentModifier
                .padding(6.dp)
                .background(Green100)
                .align(Alignment.TopStart)
        )
        Text(
            text = stringResource(id = R.string.second),
            fontSize = 22.sp,
            modifier = contentModifier.align(Alignment.Center)
        )
        Text(
            text = stringResource(id = R.string.third),
            fontSize = 22.sp,
            modifier = contentModifier.align(Alignment.BottomEnd)
        )
    }
}

/**
 *  Surface 是一种新的布局，是 Material Design 的核心隐喻。
 *  Surface 的独特之处在于它一次只能容纳一个孩子，但它为其孩子的内容提供了许多样式选项，
 *  例如高程、边框等等
 *  使用 Surface 的最常见方式是作为组件的根布局。
 *  由于它只能容纳一个子元素，因此该子元素通常是放置其余元素的另一种布局。
 *  Surface() 不处理定位——它的子级处理。
 **/
@Composable
fun MySurface(modifier: Modifier) {
    Box(modifier = modifier.fillMaxSize(), propagateMinConstraints = false) {
        Surface(
            modifier = modifier.size(100.dp), // 1
            color = Color.LightGray, // 2
            contentColor = colorResource(
                id = R.color.teal_200
            ), // 2
            elevation = 1.dp, // 3
            border = BorderStroke(1.dp, Color.Black) // 4
        ) {
            /*       这是 Jetpack Compose 强大功能的完美示例。
                   您可以重复使用之前实现的每个屏幕和可组合功能。
                   这一次，您重用了带有三个垂直 Text 元素的 MyColumn()。*/
            MyColumn() // 5
        }
    }
}

@Composable
fun RowScope.MyRowText(text: String) {
    Text(
        text = text,
        fontSize = 18.sp,
        modifier = Modifier.weight(1 / 3f)
    )
}
